<script lang="ts" setup>
import { defineProps, defineEmits, ref } from 'vue';
import {receiveCouponAPI} from "@/api/reward";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  useReceive: {
    type: Boolean,
    required: false,
    default: false
  },
  useRadio: {
    type: Boolean,
    required: false,
    default: false
  },
  radio: {
    type: Boolean,
    required: false,
    default: false
  }
});
const valid = ref<boolean>(props.useReceive || (new Date(props.data.expireDate) > new Date() && props.data.couponStatus === 1));
const viewDetail = ref<boolean>(false);

const toUse = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

const receive = async () => {
  if (!props.data.isReceived) {
    const res = await receiveCouponAPI(props.data.id)
    if (res.code === 200) props.data.isReceived = true
  }
}

const emit = defineEmits(['select'])
const handleSelect = () => {
  emit('select', props.data.id, !props.radio)
}
</script>

<template>
  <view class="coupon" :style="valid ? 'background: linear-gradient(90deg, #ED236D 0%, #fa4350 100%);' : 'background: #bfbfbf;'">
    <view class="content">
      <view class="left">
        <view class="amount">{{ data.couponType === 0 ? data.amount + '元' : data.discount * 10 + '折' }}</view>
        <view class="condition">{{ data.conditionAmount == 0 ? '无门槛' : '满' + data.conditionAmount + '元可用' }}</view>
      </view>
      <view class="center">
        <view class="name">
          <wd-text :text="data.name" color="#ffffff" :lines="1" />
        </view>
        <view v-if="!useReceive" class="expire">有效期至{{ data.expireDate }}</view>
        <view v-else class="expire">领取后{{ data.validDays }}天有效</view>
      </view>
      <view class="right">
        <view class="use">
          <button v-if="useReceive" @click="receive" class="button" :disabled="data.isReceived" style="background-color: #FBC503;">{{ data.isReceived ? '已领取' : '领取' }}</button>
          <radio v-else-if="useRadio" :checked="radio" @click="handleSelect" color="#007AFF" />
          <button v-else @click="toUse" class="button" :disabled="!valid" :style="valid ? 'background-color: #FBC503;' : 'background-color: #c8c9cc;'">{{ valid ? '去使用' : data.couponStatus === 0 ? '已使用' : '已过期'}}</button>
        </view>
        <view @click="viewDetail = !viewDetail" class="detail">查看详情 <wd-icon :name="viewDetail ? 'arrow-up' : 'arrow-down'" /></view>
      </view>
    </view>
    <view v-show="viewDetail" class="footer">
      <view>{{ data.description }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.coupon {
  border-radius: 14rpx;
  padding: 20rpx 30rpx 20rpx 20rpx;
  color: #dcdee0;
  margin-bottom: 20rpx;
  .content {
    display: flex;
    height: 140rpx;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .amount {
        flex: 3;
        display: flex;
        align-items: center;
        font-size: 50rpx;
        color: white;
      }
      .condition {
        flex: 1;
        font-size: 24rpx;
      }
    }
    .center {
      flex: 3;
      flex-direction: column;
      display: flex;
      margin-left: 10rpx;
      .name {
        flex: 3;
        display: flex;
        align-items: center;
      }
      .expire {
        flex: 1;
        font-size: 24rpx;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 10rpx;
      .use {
        flex: 3;
        display: flex;
        align-items: center;
        .button {
          width: 140rpx;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 28rpx;
        }
      }
      .detail {
        flex: 1;
        font-size: 24rpx;
      }
    }
  }
  .footer {
    margin-top: 20rpx;
    font-size: 24rpx;
  }
}
</style>
